Ysurac /
FlightAirMap
| Conditions | 1 |
| Paths | > 20000 |
| Total Lines | 900 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 2 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | // UMD initialization to work with CommonJS, AMD and basic browser script include |
||
| 17 | }(function (L) { |
||
| 18 | |||
| 19 | L.Playback = L.Playback || {}; |
||
| 20 | |||
| 21 | L.Playback.Util = L.Class.extend({ |
||
| 22 | statics: { |
||
| 23 | |||
| 24 | DateStr: function(time) { |
||
| 25 | return new Date(time).toDateString(); |
||
| 26 | }, |
||
| 27 | |||
| 28 | TimeStr: function(time) { |
||
| 29 | var d = new Date(time); |
||
| 30 | var h = d.getHours(); |
||
| 31 | var m = d.getMinutes(); |
||
| 32 | var s = d.getSeconds(); |
||
| 33 | var tms = time / 1000; |
||
| 34 | var dec = (tms - Math.floor(tms)).toFixed(2).slice(1); |
||
| 35 | var mer = 'AM'; |
||
| 36 | if (h > 11) { |
||
| 37 | h %= 12; |
||
| 38 | mer = 'PM'; |
||
| 39 | } |
||
| 40 | if (h === 0) h = 12; |
||
| 41 | if (m < 10) m = '0' + m; |
||
| 42 | if (s < 10) s = '0' + s; |
||
| 43 | return h + ':' + m + ':' + s + dec + ' ' + mer; |
||
| 44 | }, |
||
| 45 | |||
| 46 | ParseGPX: function(gpx) { |
||
| 47 | var geojson = { |
||
| 48 | type: 'Feature', |
||
| 49 | geometry: { |
||
| 50 | type: 'MultiPoint', |
||
| 51 | coordinates: [] |
||
| 52 | }, |
||
| 53 | properties: { |
||
| 54 | time: [], |
||
| 55 | speed: [], |
||
| 56 | altitude: [] |
||
| 57 | }, |
||
| 58 | bbox: [] |
||
| 59 | }; |
||
| 60 | var xml = $.parseXML(gpx); |
||
| 61 | var pts = $(xml).find('trkpt'); |
||
| 62 | for (var i=0, len=pts.length; i<len; i++) { |
||
| 63 | var p = pts[i]; |
||
| 64 | var lat = parseFloat(p.getAttribute('lat')); |
||
| 65 | var lng = parseFloat(p.getAttribute('lon')); |
||
| 66 | var timeStr = $(p).find('time').text(); |
||
| 67 | var eleStr = $(p).find('ele').text(); |
||
| 68 | var t = new Date(timeStr).getTime(); |
||
| 69 | var ele = parseFloat(eleStr); |
||
| 70 | |||
| 71 | var coords = geojson.geometry.coordinates; |
||
| 72 | var props = geojson.properties; |
||
| 73 | var time = props.time; |
||
| 74 | var altitude = geojson.properties.altitude; |
||
| 75 | |||
| 76 | coords.push([lng,lat]); |
||
| 77 | time.push(t); |
||
| 78 | altitude.push(ele); |
||
| 79 | } |
||
| 80 | return geojson; |
||
| 81 | } |
||
| 82 | } |
||
| 83 | |||
| 84 | }); |
||
| 85 | |||
| 86 | L.Playback = L.Playback || {}; |
||
| 87 | |||
| 88 | L.Playback.MoveableMarker = L.Marker.extend({ |
||
| 89 | initialize: function (startLatLng, options, feature) { |
||
| 90 | var marker_options = options.marker || {}; |
||
| 91 | |||
| 92 | if (jQuery.isFunction(marker_options)){ |
||
| 93 | marker_options = marker_options(feature); |
||
| 94 | } |
||
| 95 | L.Marker.prototype.initialize.call(this, startLatLng, marker_options); |
||
| 96 | this.popupContent = ''; |
||
| 97 | this.feature = feature; |
||
| 98 | if (marker_options.getPopup){ |
||
| 99 | this.popupContent = marker_options.getPopup(feature); |
||
| 100 | } |
||
| 101 | if(options.popups) |
||
| 102 | { |
||
| 103 | this.bindPopup(this.getPopupContent() + startLatLng.toString()); |
||
| 104 | } |
||
| 105 | if(options.labels) |
||
| 106 | { |
||
| 107 | if(this.bindLabel) |
||
| 108 | { |
||
| 109 | this.bindLabel(this.getPopupContent()); |
||
| 110 | } |
||
| 111 | else |
||
| 112 | { |
||
| 113 | console.log("Label binding requires leaflet-label (https://github.com/Leaflet/Leaflet.label)"); |
||
| 114 | } |
||
| 115 | } |
||
| 116 | }, |
||
| 117 | getPopupContent: function() { |
||
| 118 | if (this.popupContent !== ''){ |
||
| 119 | return '<b>' + this.popupContent + '</b><br/>'; |
||
| 120 | } |
||
| 121 | return ''; |
||
| 122 | }, |
||
| 123 | move: function (latLng, transitionTime) { |
||
| 124 | // Only if CSS3 transitions are supported |
||
| 125 | if (L.DomUtil.TRANSITION) { |
||
| 126 | if (this._icon) { |
||
| 127 | this._icon.style[L.DomUtil.TRANSITION] = 'all ' + transitionTime + 'ms linear'; |
||
| 128 | if (this._popup && this._popup._wrapper) |
||
| 129 | this._popup._wrapper.style[L.DomUtil.TRANSITION] = 'all ' + transitionTime + 'ms linear'; |
||
| 130 | } |
||
| 131 | if (this._shadow) { |
||
| 132 | this._shadow.style[L.DomUtil.TRANSITION] = 'all ' + transitionTime + 'ms linear'; |
||
| 133 | } |
||
| 134 | } |
||
| 135 | this.setLatLng(latLng); |
||
| 136 | if (this._popup) { |
||
| 137 | this._popup.setContent(this.getPopupContent() + this._latlng.toString()); |
||
| 138 | } |
||
| 139 | } |
||
| 140 | }); |
||
| 141 | |||
| 142 | L.Playback = L.Playback || {}; |
||
| 143 | |||
| 144 | L.Playback.Track = L.Class.extend({ |
||
| 145 | |||
| 146 | initialize : function (geoJSON, options) { |
||
| 147 | options = options || {}; |
||
| 148 | var tickLen = options.tickLen || 250; |
||
| 149 | this._staleTime = options.staleTime || 60*60*1000; |
||
| 150 | this._fadeMarkersWhenStale = options.fadeMarkersWhenStale || true; |
||
| 151 | this._beginTime = options.beginTime; |
||
| 152 | this._finalTime = options.finalTime; |
||
| 153 | |||
| 154 | this._geoJSON = geoJSON; |
||
| 155 | this._tickLen = tickLen; |
||
| 156 | this._ticks = []; |
||
| 157 | this._marker = null; |
||
| 158 | this._orientations = []; |
||
| 159 | |||
| 160 | var sampleTimes = geoJSON.properties.time; |
||
| 161 | |||
| 162 | this._orientIcon = options.orientIcons; |
||
| 163 | var previousOrientation; |
||
| 164 | |||
| 165 | var samples = geoJSON.geometry.coordinates; |
||
| 166 | var currSample = samples[0]; |
||
| 167 | var nextSample = samples[1]; |
||
| 168 | |||
| 169 | var currSampleTime = sampleTimes[0]; |
||
| 170 | var t = currSampleTime; // t is used to iterate through tick times |
||
| 171 | var nextSampleTime = sampleTimes[1]; |
||
| 172 | var tmod = t % tickLen; // ms past a tick time |
||
| 173 | var rem, |
||
| 174 | ratio; |
||
| 175 | |||
| 176 | // handle edge case of only one t sample |
||
| 177 | if (sampleTimes.length === 1) { |
||
| 178 | if (tmod !== 0) |
||
| 179 | t += tickLen - tmod; |
||
| 180 | this._ticks[t] = samples[0]; |
||
| 181 | this._orientations[t] = 0; |
||
| 182 | this._startTime = t; |
||
| 183 | this._endTime = t; |
||
| 184 | return; |
||
| 185 | } |
||
| 186 | |||
| 187 | // interpolate first tick if t not a tick time |
||
| 188 | if (tmod !== 0) { |
||
| 189 | rem = tickLen - tmod; |
||
| 190 | ratio = rem / (nextSampleTime - currSampleTime); |
||
| 191 | t += rem; |
||
| 192 | this._ticks[t] = this._interpolatePoint(currSample, nextSample, ratio); |
||
| 193 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 194 | previousOrientation = this._orientations[t]; |
||
| 195 | } else { |
||
| 196 | this._ticks[t] = currSample; |
||
| 197 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 198 | previousOrientation = this._orientations[t]; |
||
| 199 | } |
||
| 200 | |||
| 201 | this._startTime = t; |
||
| 202 | t += tickLen; |
||
| 203 | while (t < nextSampleTime) { |
||
| 204 | ratio = (t - currSampleTime) / (nextSampleTime - currSampleTime); |
||
| 205 | this._ticks[t] = this._interpolatePoint(currSample, nextSample, ratio); |
||
| 206 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 207 | previousOrientation = this._orientations[t]; |
||
| 208 | t += tickLen; |
||
| 209 | } |
||
| 210 | |||
| 211 | // iterating through the rest of the samples |
||
| 212 | for (var i = 1, len = samples.length; i < len; i++) { |
||
| 213 | currSample = samples[i]; |
||
| 214 | nextSample = samples[i + 1]; |
||
| 215 | t = currSampleTime = sampleTimes[i]; |
||
| 216 | nextSampleTime = sampleTimes[i + 1]; |
||
| 217 | |||
| 218 | tmod = t % tickLen; |
||
| 219 | if (tmod !== 0 && nextSampleTime) { |
||
| 220 | rem = tickLen - tmod; |
||
| 221 | ratio = rem / (nextSampleTime - currSampleTime); |
||
| 222 | t += rem; |
||
| 223 | this._ticks[t] = this._interpolatePoint(currSample, nextSample, ratio); |
||
| 224 | if(nextSample){ |
||
| 225 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 226 | previousOrientation = this._orientations[t]; |
||
| 227 | } else { |
||
| 228 | this._orientations[t] = previousOrientation; |
||
| 229 | } |
||
| 230 | } else { |
||
| 231 | this._ticks[t] = currSample; |
||
| 232 | if(nextSample){ |
||
| 233 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 234 | previousOrientation = this._orientations[t]; |
||
| 235 | } else { |
||
| 236 | this._orientations[t] = previousOrientation; |
||
| 237 | } |
||
| 238 | } |
||
| 239 | |||
| 240 | t += tickLen; |
||
| 241 | while (t < nextSampleTime) { |
||
| 242 | ratio = (t - currSampleTime) / (nextSampleTime - currSampleTime); |
||
| 243 | |||
| 244 | if (nextSampleTime - currSampleTime > options.maxInterpolationTime){ |
||
| 245 | this._ticks[t] = currSample; |
||
| 246 | |||
| 247 | if(nextSample){ |
||
| 248 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 249 | previousOrientation = this._orientations[t]; |
||
| 250 | } else { |
||
| 251 | this._orientations[t] = previousOrientation; |
||
| 252 | } |
||
| 253 | } |
||
| 254 | else { |
||
| 255 | this._ticks[t] = this._interpolatePoint(currSample, nextSample, ratio); |
||
| 256 | if(nextSample) { |
||
| 257 | this._orientations[t] = this._directionOfPoint(currSample,nextSample); |
||
| 258 | previousOrientation = this._orientations[t]; |
||
| 259 | } else { |
||
| 260 | this._orientations[t] = previousOrientation; |
||
| 261 | } |
||
| 262 | } |
||
| 263 | t += tickLen; |
||
| 264 | } |
||
| 265 | } |
||
| 266 | |||
| 267 | // the last t in the while would be past bounds |
||
| 268 | this._endTime = t - tickLen; |
||
| 269 | this._lastTick = this._ticks[this._endTime]; |
||
| 270 | |||
| 271 | }, |
||
| 272 | |||
| 273 | _interpolatePoint : function (start, end, ratio) { |
||
| 274 | try { |
||
| 275 | var delta = [end[0] - start[0], end[1] - start[1]]; |
||
| 276 | var offset = [delta[0] * ratio, delta[1] * ratio]; |
||
| 277 | return [start[0] + offset[0], start[1] + offset[1]]; |
||
| 278 | } catch (e) { |
||
| 279 | console.log('err: cant interpolate a point'); |
||
| 280 | console.log(['start', start]); |
||
| 281 | console.log(['end', end]); |
||
| 282 | console.log(['ratio', ratio]); |
||
| 283 | } |
||
| 284 | }, |
||
| 285 | |||
| 286 | _directionOfPoint:function(start,end){ |
||
| 287 | return this._getBearing(start[1],start[0],end[1],end[0]); |
||
| 288 | }, |
||
| 289 | |||
| 290 | _getBearing:function(startLat,startLong,endLat,endLong){ |
||
| 291 | startLat = this._radians(startLat); |
||
| 292 | startLong = this._radians(startLong); |
||
| 293 | endLat = this._radians(endLat); |
||
| 294 | endLong = this._radians(endLong); |
||
| 295 | |||
| 296 | var dLong = endLong - startLong; |
||
| 297 | var dPhi = Math.log(Math.tan(endLat/2.0+Math.PI/4.0)/Math.tan(startLat/2.0+Math.PI/4.0)); |
||
| 298 | if (Math.abs(dLong) > Math.PI){ |
||
| 299 | if (dLong > 0.0) |
||
| 300 | dLong = -(2.0 * Math.PI - dLong); |
||
| 301 | else |
||
| 302 | dLong = (2.0 * Math.PI + dLong); |
||
| 303 | } |
||
| 304 | return (this._degrees(Math.atan2(dLong, dPhi)) + 360.0) % 360.0; |
||
| 305 | }, |
||
| 306 | _radians:function(n) { |
||
| 307 | return n * (Math.PI / 180); |
||
| 308 | }, |
||
| 309 | _degrees:function(n) { |
||
| 310 | return n * (180 / Math.PI); |
||
| 311 | }, |
||
| 312 | |||
| 313 | getFirstTick : function () { |
||
| 314 | return this._ticks[this._startTime]; |
||
| 315 | }, |
||
| 316 | |||
| 317 | getLastTick : function () { |
||
| 318 | return this._ticks[this._endTime]; |
||
| 319 | }, |
||
| 320 | |||
| 321 | getStartTime : function () { |
||
| 322 | return this._startTime; |
||
| 323 | }, |
||
| 324 | |||
| 325 | getEndTime : function () { |
||
| 326 | return this._endTime; |
||
| 327 | }, |
||
| 328 | |||
| 329 | getTickMultiPoint : function () { |
||
| 330 | var t = this.getStartTime(); |
||
| 331 | var endT = this.getEndTime(); |
||
| 332 | var coordinates = []; |
||
| 333 | var time = []; |
||
| 334 | while (t <= endT) { |
||
| 335 | time.push(t); |
||
| 336 | coordinates.push(this.tick(t)); |
||
| 337 | t += this._tickLen; |
||
| 338 | } |
||
| 339 | |||
| 340 | return { |
||
| 341 | type : 'Feature', |
||
| 342 | geometry : { |
||
| 343 | type : 'MultiPoint', |
||
| 344 | coordinates : coordinates |
||
| 345 | }, |
||
| 346 | properties : { |
||
| 347 | time : time |
||
| 348 | } |
||
| 349 | }; |
||
| 350 | }, |
||
| 351 | |||
| 352 | trackPresentAtTick : function(timestamp) |
||
| 353 | { |
||
| 354 | return (timestamp >= this._startTime); |
||
| 355 | }, |
||
| 356 | trackStaleAtTick : function(timestamp) |
||
| 357 | { |
||
| 358 | //if ((this._endTime + this._staleTime) <= timestamp) console.log('endtime: '+this._endTime+' - timestamp: '+timestamp+' => true !'); |
||
| 359 | //else console.log('endtime: '+this._endTime+' - timestamp: '+timestamp); |
||
| 360 | return ((this._endTime + this._staleTime) <= timestamp); |
||
| 361 | }, |
||
| 362 | tick : function (timestamp) { |
||
| 363 | if (timestamp > this._endTime) |
||
| 364 | timestamp = this._endTime; |
||
| 365 | if (typeof this._finalTime != 'undefined' && timestamp > this._finalTime) |
||
| 366 | timestamp = this._finalTime; |
||
| 367 | if (timestamp < this._startTime) |
||
| 368 | timestamp = this._startTime; |
||
| 369 | return this._ticks[timestamp]; |
||
| 370 | }, |
||
| 371 | courseAtTime: function(timestamp) |
||
| 372 | { |
||
| 373 | //return 90; |
||
| 374 | if (timestamp > this._endTime) |
||
| 375 | timestamp = this._endTime; |
||
| 376 | if (typeof this._finalTime != 'undefined' && timestamp > this._finalTime) |
||
| 377 | timestamp = this._finalTime; |
||
| 378 | if (timestamp < this._startTime) |
||
| 379 | timestamp = this._startTime; |
||
| 380 | return this._orientations[timestamp]; |
||
| 381 | }, |
||
| 382 | setMarker : function(timestamp, options){ |
||
| 383 | var lngLat = null; |
||
| 384 | // if time stamp is not set, then get first tick |
||
| 385 | if (timestamp) { |
||
| 386 | lngLat = this.tick(timestamp); |
||
| 387 | } |
||
| 388 | else { |
||
| 389 | lngLat = this.getFirstTick(); |
||
| 390 | } |
||
| 391 | if (lngLat) { |
||
| 392 | var latLng = new L.LatLng(lngLat[1], lngLat[0]); |
||
| 393 | this._marker = new L.Playback.MoveableMarker(latLng, options, this._geoJSON); |
||
| 394 | if(options.mouseOverCallback) { |
||
| 395 | this._marker.on('mouseover',options.mouseOverCallback); |
||
| 396 | } |
||
| 397 | if(options.clickCallback) { |
||
| 398 | this._marker.on('click',options.clickCallback); |
||
| 399 | } |
||
| 400 | //hide the marker if its not present yet and fadeMarkersWhenStale is true |
||
| 401 | if(this._fadeMarkersWhenStale && !this.trackPresentAtTick(timestamp)) |
||
| 402 | { |
||
| 403 | this._marker.setOpacity(0); |
||
| 404 | } |
||
| 405 | } |
||
| 406 | return this._marker; |
||
| 407 | }, |
||
| 408 | moveMarker : function(latLng, transitionTime,timestamp) { |
||
| 409 | if (this._marker) { |
||
| 410 | if(this._fadeMarkersWhenStale) { |
||
| 411 | //show the marker if its now present |
||
| 412 | if(this.trackPresentAtTick(timestamp)) { |
||
| 413 | this._marker.setOpacity(1); |
||
| 414 | } else { |
||
| 415 | this._marker.setOpacity(0); |
||
| 416 | } |
||
| 417 | if(this.trackStaleAtTick(timestamp)) { |
||
| 418 | this._marker.setOpacity(0); |
||
| 419 | } |
||
| 420 | } |
||
| 421 | if(this._orientIcon){ |
||
| 422 | this._marker.setIconAngle(this.courseAtTime(timestamp)); |
||
| 423 | } |
||
| 424 | this._marker.move(latLng, transitionTime); |
||
| 425 | } |
||
| 426 | }, |
||
| 427 | getMarker : function() { |
||
| 428 | return this._marker; |
||
| 429 | } |
||
| 430 | |||
| 431 | }); |
||
| 432 | |||
| 433 | L.Playback = L.Playback || {}; |
||
| 434 | |||
| 435 | L.Playback.TrackController = L.Class.extend({ |
||
| 436 | |||
| 437 | initialize : function (map, tracks, options) { |
||
| 438 | this.options = options || {}; |
||
| 439 | this._map = map; |
||
| 440 | this._tracks = []; |
||
| 441 | // initialize tick points |
||
| 442 | this.setTracks(tracks); |
||
| 443 | }, |
||
| 444 | |||
| 445 | clearTracks: function(){ |
||
| 446 | while (this._tracks.length > 0) { |
||
| 447 | var track = this._tracks.pop(); |
||
| 448 | var marker = track.getMarker(); |
||
| 449 | if (marker){ |
||
| 450 | this._map.removeLayer(marker); |
||
| 451 | } |
||
| 452 | } |
||
| 453 | }, |
||
| 454 | |||
| 455 | setTracks : function (tracks) { |
||
| 456 | // reset current tracks |
||
| 457 | this.clearTracks(); |
||
| 458 | this.addTracks(tracks); |
||
| 459 | }, |
||
| 460 | addTracks : function (tracks) { |
||
| 461 | // return if nothing is set |
||
| 462 | if (!tracks) { |
||
| 463 | return; |
||
| 464 | } |
||
| 465 | if (tracks instanceof Array) { |
||
| 466 | for (var i = 0, len = tracks.length; i < len; i++) { |
||
| 467 | this.addTrack(tracks[i]); |
||
| 468 | } |
||
| 469 | } else { |
||
| 470 | this.addTrack(tracks); |
||
| 471 | } |
||
| 472 | }, |
||
| 473 | |||
| 474 | // add single track |
||
| 475 | addTrack : function (track, timestamp) { |
||
| 476 | // return if nothing is set |
||
| 477 | if (!track) { |
||
| 478 | return; |
||
| 479 | } |
||
| 480 | var marker = track.setMarker(timestamp, this.options); |
||
| 481 | if (marker) { |
||
| 482 | marker.addTo(this._map); |
||
| 483 | this._tracks.push(track); |
||
| 484 | } |
||
| 485 | }, |
||
| 486 | |||
| 487 | tock : function (timestamp, transitionTime) { |
||
| 488 | for (var i = 0, len = this._tracks.length; i < len; i++) { |
||
| 489 | var lngLat = this._tracks[i].tick(timestamp); |
||
| 490 | var latLng = new L.LatLng(lngLat[1], lngLat[0]); |
||
| 491 | this._tracks[i].moveMarker(latLng, transitionTime,timestamp); |
||
| 492 | } |
||
| 493 | }, |
||
| 494 | |||
| 495 | getStartTime : function () { |
||
| 496 | var earliestTime = 0; |
||
| 497 | |||
| 498 | if (this._tracks.length > 0) { |
||
| 499 | earliestTime = this._tracks[0].getStartTime(); |
||
| 500 | for (var i = 1, len = this._tracks.length; i < len; i++) { |
||
| 501 | var t = this._tracks[i].getStartTime(); |
||
| 502 | if (t < earliestTime) { |
||
| 503 | earliestTime = t; |
||
| 504 | } |
||
| 505 | } |
||
| 506 | } |
||
| 507 | return earliestTime; |
||
| 508 | }, |
||
| 509 | |||
| 510 | getEndTime : function () { |
||
| 511 | var latestTime = 0; |
||
| 512 | if (this._tracks.length > 0){ |
||
| 513 | latestTime = this._tracks[0].getEndTime(); |
||
| 514 | for (var i = 1, len = this._tracks.length; i < len; i++) { |
||
| 515 | var t = this._tracks[i].getEndTime(); |
||
| 516 | if (t > latestTime) { |
||
| 517 | latestTime = t; |
||
| 518 | } |
||
| 519 | } |
||
| 520 | } |
||
| 521 | return latestTime; |
||
| 522 | }, |
||
| 523 | |||
| 524 | getTracks : function () { |
||
| 525 | return this._tracks; |
||
| 526 | } |
||
| 527 | }); |
||
| 528 | L.Playback = L.Playback || {}; |
||
| 529 | |||
| 530 | L.Playback.Clock = L.Class.extend({ |
||
| 531 | initialize: function (trackController, callback, options) { |
||
| 532 | this._trackController = trackController; |
||
| 533 | this._callbacksArry = []; |
||
| 534 | if (callback) this.addCallback(callback); |
||
| 535 | L.setOptions(this, options); |
||
| 536 | this._speed = this.options.speed; |
||
| 537 | this._tickLen = this.options.tickLen; |
||
| 538 | this._cursor = trackController.getStartTime(); |
||
| 539 | this._transitionTime = this._tickLen / this._speed; |
||
| 540 | }, |
||
| 541 | |||
| 542 | _tick: function (self) { |
||
| 543 | self._trackController.tock(self._cursor, self._transitionTime); |
||
| 544 | self._callbacks(self._cursor); |
||
| 545 | if (self._cursor > self._trackController.getEndTime()) { |
||
| 546 | clearInterval(self._intervalID); |
||
| 547 | return; |
||
| 548 | } |
||
| 549 | self._cursor += self._tickLen; |
||
| 550 | }, |
||
| 551 | |||
| 552 | _callbacks: function(cursor) { |
||
| 553 | var arry = this._callbacksArry; |
||
| 554 | for (var i=0, len=arry.length; i<len; i++) { |
||
| 555 | arry[i](cursor); |
||
| 556 | } |
||
| 557 | }, |
||
| 558 | |||
| 559 | addCallback: function(fn) { |
||
| 560 | this._callbacksArry.push(fn); |
||
| 561 | }, |
||
| 562 | |||
| 563 | start: function () { |
||
| 564 | if (this._intervalID) return; |
||
| 565 | this._intervalID = window.setInterval( |
||
| 566 | this._tick, |
||
| 567 | this._transitionTime, |
||
| 568 | this |
||
| 569 | ); |
||
| 570 | }, |
||
| 571 | |||
| 572 | stop: function () { |
||
| 573 | if (!this._intervalID) return; |
||
| 574 | clearInterval(this._intervalID); |
||
| 575 | this._intervalID = null; |
||
| 576 | }, |
||
| 577 | |||
| 578 | getSpeed: function() { |
||
| 579 | return this._speed; |
||
| 580 | }, |
||
| 581 | |||
| 582 | isPlaying: function() { |
||
| 583 | return this._intervalID ? true : false; |
||
| 584 | }, |
||
| 585 | |||
| 586 | setSpeed: function (speed) { |
||
| 587 | this._speed = speed; |
||
| 588 | this._transitionTime = this._tickLen / speed; |
||
| 589 | if (this._intervalID) { |
||
| 590 | this.stop(); |
||
| 591 | this.start(); |
||
| 592 | } |
||
| 593 | }, |
||
| 594 | |||
| 595 | setCursor: function (ms) { |
||
| 596 | var time = parseInt(ms); |
||
| 597 | if (!time) return; |
||
| 598 | var mod = time % this._tickLen; |
||
| 599 | if (mod !== 0) { |
||
| 600 | time += this._tickLen - mod; |
||
| 601 | } |
||
| 602 | this._cursor = time; |
||
| 603 | this._trackController.tock(this._cursor, 0); |
||
| 604 | this._callbacks(this._cursor); |
||
| 605 | }, |
||
| 606 | |||
| 607 | getTime: function() { |
||
| 608 | return this._cursor; |
||
| 609 | }, |
||
| 610 | |||
| 611 | getStartTime: function() { |
||
| 612 | return this._trackController.getStartTime(); |
||
| 613 | }, |
||
| 614 | |||
| 615 | getEndTime: function() { |
||
| 616 | return this._trackController.getEndTime(); |
||
| 617 | }, |
||
| 618 | |||
| 619 | getTickLen: function() { |
||
| 620 | return this._tickLen; |
||
| 621 | } |
||
| 622 | |||
| 623 | }); |
||
| 624 | |||
| 625 | // Simply shows all of the track points as circles. |
||
| 626 | // TODO: Associate circle color with the marker color. |
||
| 627 | |||
| 628 | L.Playback = L.Playback || {}; |
||
| 629 | |||
| 630 | L.Playback.TracksLayer = L.Class.extend({ |
||
| 631 | initialize : function (map, options) { |
||
| 632 | var layer_options = options.layer || {}; |
||
| 633 | if (jQuery.isFunction(layer_options)){ |
||
| 634 | layer_options = layer_options(feature); |
||
| 635 | } |
||
| 636 | if (!layer_options.pointToLayer) { |
||
| 637 | layer_options.pointToLayer = function (featureData, latlng) { |
||
| 638 | return new L.CircleMarker(latlng, { radius : 5 }); |
||
| 639 | }; |
||
| 640 | } |
||
| 641 | this.layer = new L.GeoJSON(null, layer_options); |
||
| 642 | var overlayControl = { |
||
| 643 | 'GPS Tracks' : this.layer |
||
| 644 | }; |
||
| 645 | L.control.layers(null, overlayControl, { |
||
| 646 | collapsed : false |
||
| 647 | }).addTo(map); |
||
| 648 | }, |
||
| 649 | |||
| 650 | // clear all geoJSON layers |
||
| 651 | clearLayer : function(){ |
||
| 652 | for (var i in this.layer._layers) { |
||
| 653 | this.layer.removeLayer(this.layer._layers[i]); |
||
| 654 | } |
||
| 655 | }, |
||
| 656 | |||
| 657 | // add new geoJSON layer |
||
| 658 | addLayer : function(geoJSON) { |
||
| 659 | this.layer.addData(geoJSON); |
||
| 660 | } |
||
| 661 | }); |
||
| 662 | L.Playback = L.Playback || {}; |
||
| 663 | |||
| 664 | L.Playback.DateControl = L.Control.extend({ |
||
| 665 | options : { |
||
| 666 | position : 'bottomleft', |
||
| 667 | dateFormatFn: L.Playback.Util.DateStr, |
||
| 668 | timeFormatFn: L.Playback.Util.TimeStr |
||
| 669 | }, |
||
| 670 | |||
| 671 | initialize : function (playback, options) { |
||
| 672 | L.setOptions(this, options); |
||
| 673 | this.playback = playback; |
||
| 674 | }, |
||
| 675 | |||
| 676 | onAdd : function (map) { |
||
| 677 | this._container = L.DomUtil.create('div', 'leaflet-control-layers leaflet-control-layers-expanded'); |
||
| 678 | |||
| 679 | var self = this; |
||
| 680 | var playback = this.playback; |
||
| 681 | var time = playback.getTime(); |
||
| 682 | |||
| 683 | var datetime = L.DomUtil.create('div', 'datetimeControl', this._container); |
||
| 684 | |||
| 685 | // date time |
||
| 686 | this._date = L.DomUtil.create('p', '', datetime); |
||
| 687 | this._time = L.DomUtil.create('p', '', datetime); |
||
| 688 | |||
| 689 | this._date.innerHTML = this.options.dateFormatFn(time); |
||
| 690 | this._time.innerHTML = this.options.timeFormatFn(time); |
||
| 691 | |||
| 692 | // setup callback |
||
| 693 | playback.addCallback(function (ms) { |
||
| 694 | self._date.innerHTML = self.options.dateFormatFn(ms); |
||
| 695 | self._time.innerHTML = self.options.timeFormatFn(ms); |
||
| 696 | }); |
||
| 697 | |||
| 698 | return this._container; |
||
| 699 | } |
||
| 700 | }); |
||
| 701 | |||
| 702 | L.Playback.PlayControl = L.Control.extend({ |
||
| 703 | options : { |
||
| 704 | position : 'bottomright' |
||
| 705 | }, |
||
| 706 | |||
| 707 | initialize : function (playback) { |
||
| 708 | this.playback = playback; |
||
| 709 | }, |
||
| 710 | |||
| 711 | onAdd : function (map) { |
||
| 712 | this._container = L.DomUtil.create('div', 'leaflet-control-layers leaflet-control-layers-expanded'); |
||
| 713 | |||
| 714 | var self = this; |
||
| 715 | var playback = this.playback; |
||
| 716 | playback.setSpeed(100); |
||
| 717 | |||
| 718 | var playControl = L.DomUtil.create('div', 'playControl', this._container); |
||
| 719 | |||
| 720 | |||
| 721 | this._button = L.DomUtil.create('button', '', playControl); |
||
| 722 | this._button.innerHTML = 'Play'; |
||
| 723 | |||
| 724 | |||
| 725 | var stop = L.DomEvent.stopPropagation; |
||
| 726 | |||
| 727 | L.DomEvent |
||
| 728 | .on(this._button, 'click', stop) |
||
| 729 | .on(this._button, 'mousedown', stop) |
||
| 730 | .on(this._button, 'dblclick', stop) |
||
| 731 | .on(this._button, 'click', L.DomEvent.preventDefault) |
||
| 732 | .on(this._button, 'click', play, this); |
||
| 733 | |||
| 734 | function play(){ |
||
| 735 | if (playback.isPlaying()) { |
||
| 736 | playback.stop(); |
||
| 737 | self._button.innerHTML = 'Play'; |
||
| 738 | } |
||
| 739 | else { |
||
| 740 | playback.start(); |
||
| 741 | self._button.innerHTML = 'Stop'; |
||
| 742 | } |
||
| 743 | } |
||
| 744 | |||
| 745 | return this._container; |
||
| 746 | } |
||
| 747 | }); |
||
| 748 | |||
| 749 | L.Playback.SliderControl = L.Control.extend({ |
||
| 750 | options : { |
||
| 751 | position : 'bottomleft' |
||
| 752 | }, |
||
| 753 | |||
| 754 | initialize : function (playback) { |
||
| 755 | this.playback = playback; |
||
| 756 | }, |
||
| 757 | |||
| 758 | onAdd : function (map) { |
||
| 759 | this._container = L.DomUtil.create('div', 'leaflet-control-layers leaflet-control-layers-expanded'); |
||
| 760 | |||
| 761 | var self = this; |
||
| 762 | var playback = this.playback; |
||
| 763 | |||
| 764 | // slider |
||
| 765 | this._slider = L.DomUtil.create('input', 'slider', this._container); |
||
| 766 | this._slider.type = 'range'; |
||
| 767 | this._slider.min = playback.getStartTime(); |
||
| 768 | this._slider.max = playback.getEndTime(); |
||
| 769 | this._slider.value = playback.getTime(); |
||
| 770 | |||
| 771 | var stop = L.DomEvent.stopPropagation; |
||
| 772 | |||
| 773 | L.DomEvent |
||
| 774 | .on(this._slider, 'click', stop) |
||
| 775 | .on(this._slider, 'mousedown', stop) |
||
| 776 | .on(this._slider, 'dblclick', stop) |
||
| 777 | .on(this._slider, 'click', L.DomEvent.preventDefault) |
||
| 778 | //.on(this._slider, 'mousemove', L.DomEvent.preventDefault) |
||
| 779 | .on(this._slider, 'change', onSliderChange, this) |
||
| 780 | .on(this._slider, 'mousemove', onSliderChange, this); |
||
| 781 | |||
| 782 | |||
| 783 | function onSliderChange(e) { |
||
| 784 | var val = Number(e.target.value); |
||
| 785 | playback.setCursor(val); |
||
| 786 | } |
||
| 787 | |||
| 788 | playback.addCallback(function (ms) { |
||
| 789 | self._slider.value = ms; |
||
| 790 | }); |
||
| 791 | |||
| 792 | map.on('playback:add_tracks', function() { |
||
| 793 | self._slider.min = playback.getStartTime(); |
||
| 794 | self._slider.max = playback.getEndTime(); |
||
| 795 | self._slider.value = playback.getTime(); |
||
| 796 | }); |
||
| 797 | return this._container; |
||
| 798 | } |
||
| 799 | }); |
||
| 800 | |||
| 801 | L.Playback = L.Playback.Clock.extend({ |
||
| 802 | statics : { |
||
| 803 | MoveableMarker : L.Playback.MoveableMarker, |
||
| 804 | Track : L.Playback.Track, |
||
| 805 | TrackController : L.Playback.TrackController, |
||
| 806 | Clock : L.Playback.Clock, |
||
| 807 | Util : L.Playback.Util, |
||
| 808 | TracksLayer : L.Playback.TracksLayer, |
||
| 809 | PlayControl : L.Playback.PlayControl, |
||
| 810 | DateControl : L.Playback.DateControl, |
||
| 811 | SliderControl : L.Playback.SliderControl |
||
| 812 | }, |
||
| 813 | |||
| 814 | options : { |
||
| 815 | tickLen: 250, |
||
| 816 | speed: 1, |
||
| 817 | maxInterpolationTime: 5*60*1000, // 5 minutes |
||
| 818 | tracksLayer : true, |
||
| 819 | playControl: false, |
||
| 820 | dateControl: false, |
||
| 821 | sliderControl: false, |
||
| 822 | // options |
||
| 823 | layer: { |
||
| 824 | // pointToLayer(featureData, latlng) |
||
| 825 | }, |
||
| 826 | marker : { |
||
| 827 | // getPopup(feature) |
||
| 828 | } |
||
| 829 | }, |
||
| 830 | |||
| 831 | initialize : function (map, geoJSON, callback, options) { |
||
| 832 | L.setOptions(this, options); |
||
| 833 | this._map = map; |
||
| 834 | this._trackController = new L.Playback.TrackController(map, null, this.options); |
||
| 835 | L.Playback.Clock.prototype.initialize.call(this, this._trackController, callback, this.options); |
||
| 836 | if (this.options.tracksLayer) { |
||
| 837 | this._tracksLayer = new L.Playback.TracksLayer(map, options); |
||
| 838 | } |
||
| 839 | |||
| 840 | this.setData(geoJSON); |
||
| 841 | |||
| 842 | if (this.options.playControl) { |
||
| 843 | this.playControl = new L.Playback.PlayControl(this); |
||
| 844 | this.playControl.addTo(map); |
||
| 845 | } |
||
| 846 | |||
| 847 | if (this.options.sliderControl) { |
||
| 848 | this.sliderControl = new L.Playback.SliderControl(this); |
||
| 849 | this.sliderControl.addTo(map); |
||
| 850 | } |
||
| 851 | |||
| 852 | if (this.options.dateControl) { |
||
| 853 | this.dateControl = new L.Playback.DateControl(this, options); |
||
| 854 | this.dateControl.addTo(map); |
||
| 855 | } |
||
| 856 | |||
| 857 | }, |
||
| 858 | clearData : function(){ |
||
| 859 | this._trackController.clearTracks(); |
||
| 860 | if (this._tracksLayer) { |
||
| 861 | this._tracksLayer.clearLayer(); |
||
| 862 | } |
||
| 863 | }, |
||
| 864 | |||
| 865 | setData : function (geoJSON) { |
||
| 866 | this.clearData(); |
||
| 867 | this.addData(geoJSON, this.getTime()); |
||
| 868 | this.setCursor(this.getStartTime()); |
||
| 869 | }, |
||
| 870 | |||
| 871 | // bad implementation |
||
| 872 | addData : function (geoJSON, ms) { |
||
| 873 | // return if data not set |
||
| 874 | if (!geoJSON) { |
||
| 875 | return; |
||
| 876 | } |
||
| 877 | if (geoJSON instanceof Array) { |
||
| 878 | for (var i = 0, len = geoJSON.length; i < len; i++) { |
||
| 879 | this._trackController.addTrack(new L.Playback.Track(geoJSON[i], this.options), ms); |
||
| 880 | } |
||
| 881 | } else { |
||
| 882 | this._trackController.addTrack(new L.Playback.Track(geoJSON, this.options), ms); |
||
| 883 | } |
||
| 884 | |||
| 885 | this._map.fire('playback:set:data'); |
||
| 886 | if (this.options.tracksLayer) { |
||
| 887 | this._tracksLayer.addLayer(geoJSON); |
||
| 888 | } |
||
| 889 | }, |
||
| 890 | |||
| 891 | destroy: function() { |
||
| 892 | this.clearData(); |
||
| 893 | if (this.playControl) { |
||
| 894 | this._map.removeControl(this.playControl); |
||
| 895 | } |
||
| 896 | if (this.sliderControl) { |
||
| 897 | this._map.removeControl(this.sliderControl); |
||
| 898 | } |
||
| 899 | if (this.dateControl) { |
||
| 900 | this._map.removeControl(this.dateControl); |
||
| 901 | } |
||
| 902 | } |
||
| 903 | }); |
||
| 904 | |||
| 905 | L.Map.addInitHook(function () { |
||
| 906 | if (this.options.playback) { |
||
| 907 | this.playback = new L.Playback(this); |
||
| 908 | } |
||
| 909 | }); |
||
| 910 | |||
| 911 | L.playback = function (map, geoJSON, callback, options) { |
||
| 912 | return new L.Playback(map, geoJSON, callback, options); |
||
| 913 | }; |
||
| 914 | return L.Playback; |
||
| 915 | |||
| 916 | })); |
||
| 917 |
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.